<template>
  <view class="header">
    <view class="status">
      <view v-if="record?.feeStatusName" class="status-1 item">{{ record?.feeStatusName }}</view>
      <view v-if="record?.feeTypeName" class="status-2 item">{{ record?.feeTypeName }}</view>
      <view v-if="record?.costTypeName" class="status-3 item">{{ record?.costTypeName }}</view>
      <view v-if="record?.payTypeName" class="status-4 item text-o">{{ record?.payTypeName }}</view>
    </view>
  </view>
  <view class="body">
    <view class="fee-item">
      <view class="fee-table">
        <!-- 表头 -->
        <view class="tlt">
          <view class="table-item item-1">费用名称</view>
          <view class="table-item item-2">费用金额</view>
          <view class="table-item item-3">待结金额</view>
          <view class="table-item item-4">生成节点</view>
          <view class="table-item item-5">费用备注</view>
          <view class="table-item item-5">结算备注</view>
        </view>
        <view style="border: 2rpx solid #f7f8fa; padding-bottom: 32rpx">
          <!-- 1级 -->
          <view class="fee-first">
            <view class="table-item item-1" @click="handleFold">
              <!-- 其他费用 不分期 不拼接 -->
              <text style="margin-right: 12rpx"
                >{{ record?.feeCategory == 5 || (record?.feeCategory == 6 && record?.installment == 0) ? '' : record?.feeCategoryName + '-'
                }}{{ record?.feeName }}
              </text>
              <template v-if="record?.feeNameId == 57 || record?.feeNameId == 61">
                <ve-icon v-if="feeFold" name="arrow_top" size="28" />
                <ve-icon v-else name="arrow_bottom" size="28" />
              </template>
            </view>
            <view class="table-item item-2">{{ record?.totalAmount }}</view>
            <view class="table-item item-3">{{ record?.outstandingAmount }}</view>
            <view class="table-item item-4">{{ record?.createNodeName }}</view>
            <view class="table-item item-5">{{ record?.remark }}</view>
            <view class="table-item item-5">{{ record?.settlementRemark }}</view>
          </view>
          <!-- feeNameId 57 车辆购置补充费  61 借调附加费-->
          <view class="fee-other" v-if="(record?.feeNameId == 57 || record?.feeNameId == 61) && record?.feeDetailList && feeFold">
            <!-- 2级 -->
            <view class="twice" v-for="(el, elindex) in record?.feeDetailList" :key="elindex">
              <view class="table-item item-1">{{ el.feeName }}</view>
              <view class="table-item item-2">{{ el.totalAmount }}</view>
              <view class="table-item item-3"></view>
              <view class="table-item item-4"></view>
              <view class="table-item item-5">{{ el.remark }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="table-buttons">
      <ve-cell label="生成时间">{{ record?.createTime }}</ve-cell>
      <ve-cell label="应结日期">{{ dueDate }}</ve-cell>
      <ve-cell label="实结日期" v-if="![0,3].includes(record?.feeStatus)">{{ record?.payTime }}</ve-cell>
      <view class="line" v-if="record?.feeStatus === 0 || record?.feeStatus === 3 || record?.feeStatus === 5"></view>
      <view class="buttons" v-if="record?.feeStatus === 0 || record?.feeStatus === 3 || record?.feeStatus === 5">
        <ve-button type="plain" status="gray" size="mini" @click="editFee(record)"> 修改费用 </ve-button>
        <ve-button type="primary" size="mini" style="margin-left: 16rpx" @click="confirmFee(record)"> 结算 </ve-button>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
  import { ref, computed } from 'vue'

  const props = defineProps({
    record: Object,
    index: Number,
    carId: Number,
  })

  // 1级
  const feeFold = ref(true)
  const handleFold = () => {
    feeFold.value = !feeFold.value
  }

  const dueDate = computed(() => {
    return (props.record?.dueDate || '').slice(0, 11)
  })

  const confirmFee = (record: any) => {
    if (!record.feeChecke) {
      uni.showToast({
        title: '不支持跨期结算',
        icon: 'none',
      })
      return
    }
    uni.navigateTo({
      url: `/pages/asset/car-manager/confirm-fee?carId=${props.carId}&idList=[${JSON.stringify(record.id)}]&pagefrom=expense&supplierType=${
        record.supplierType
      }`,
    })
  }

  const editFee = (record: any) => {
    // 57 车辆购置补充费 61借调附加费 58 借调费
    if (record.feeNameId === 57 || record.feeNameId === 61 || record.feeCategory === 5) {
      uni.navigateTo({
        url: `/pages/asset/car-manager/add-fee?id=${record.id}&feeCategory=${record.feeCategory}&operateType=5&installment=${record.installment}&businesCode=${record.businesCode}&carId=${record.carId}&businesId=${record.businesId}`,
      })
    } else if (record.feeCategory === 6 || record.feeCategory === 0) {
      uni.navigateTo({
        url: `/pages/asset/car-manager/form/components/bill-plan?id=${record.businesId}&_id=${record.id}&feeCategory=${record.feeCategory}&feeNameId=${record.feeNameId}&feeName=${record.feeName}&installment=${record.installment}&businesCode=${record.businesCode}&carId=${record.carId}&status=edit`,
      })
    }
  }
</script>

<style lang="less" scoped>
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .status {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      .item {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 40rpx;
        border-radius: 472rpx;
        padding: 0 16rpx;
        font-size: 24rpx;
        margin-right: 16rpx;
        font-weight: 500;

        &:last-child {
          margin-right: 0;
        }
      }
      .status-1 {
        background-color: rgba(255, 236, 232, 1);
        color: #f53f3f;
        border: 2rpx solid #f53f3f;
      }
      .status-2 {
        background: rgba(232, 247, 255, 1);
        color: rgba(52, 145, 250, 1);
        border: 2rpx solid rgba(52, 145, 250, 1);
      }
      .status-3 {
        background-color: rgba(255, 247, 232, 1);
        color: #ff7d00;
        border: 2rpx solid #ff7d00;
      }
      .status-4 {
        background: #f5e8ff;
        color: #722ed1;
        border: 2rpx solid #722ed1;
      }
      .text-o {
        display: inline-block;
        max-width: 280rpx;
        line-height: 40rpx;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }

    .card-fold {
      display: flex;
      align-items: center;
      .fold-text {
        font-size: 28rpx;
        font-weight: 400;
        color: #3072f6;
        margin-right: 8rpx;
      }
    }
    .open-close {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      text {
        color: rgba(48, 114, 246, 1);
        margin-right: 4rpx;
        font-size: 28rpx;
      }
    }
  }
  .body {
    margin-top: 32rpx;
    border-top: 2rpx solid rgba(216, 216, 216, 0.3);
  }
  .fee-item {
    overflow-x: scroll;
    margin-top: 24rpx;
    .fee-table {
      width: 1190rpx;
      .tlt,
      .fee-first,
      .twice {
        width: 100%;
        background: #f7f8fa;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        color: #8491a8;
        font-size: 24rpx;
        font-weight: 400;
      }
      .fee-first,
      .twice {
        background: #ffffff;
        color: #191c27;
        font-size: 28rpx;
      }
      .fee-other {
        padding: 0 24rpx;
        .twice {
          background: #f7f8fa;
        }
      }

      .table-item {
        padding: 24rpx 24rpx;
      }
      .item-1 {
        width: 260rpx;
      }
      .item-2 {
        width: 160rpx;
      }
      .item-3 {
        width: 160rpx;
      }
      .item-4 {
        width: 230rpx;
      }
      .item-5 {
        width: 420rpx;
      }

      .twice {
        .item-1 {
          width: 260rpx - 24rpx;
        }
      }
    }
  }
  .table-buttons {
    padding-top: 0.1rpx;
    .line {
      width: 100%;
      height: 1rpx;
      background: rgba(216, 216, 216, 0.3);
    }
    .buttons {
      margin-top: 24rpx;
      display: flex;
      justify-content: right;
    }
  }
</style>
